<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>箭头函数</title>
</head>
<body>

    <button id="btn">点击</button>
    <script>
        /**
         * 箭头函数直接返回一个对象，必须在对象外面加上括号，否则会报错
        */

        // let foo =()=>({name:"Alice",age:12})
        // console.log(foo());

        // let fww =({name="Tom",age=12})=>console.log(name,age);
        // fww({name:"Jack",age:23});


        /**
         * 箭头函数有几个使用注意点。

        （1）箭头函数没有自己的this对象（详见下文）。

        （2）不可以当作构造函数，也就是说，不可以对箭头函数使用new命令，否则会抛出一个错误。

        （3）不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。

        （4）不可以使用yield命令，因此箭头函数不能用作 Generator 函数
        */

        /**
         * 箭头函数内部的this就是定义时上层作用域中的this
         *  ES6
                function foo() {
                setTimeout(() => {
                    console.log('id:', this.id);
                }, 100);
                }

            ES5
                function foo() {
                var _this = this;

                setTimeout(function () {
                    console.log('id:', _this.id);
                }, 100);
        */

       /**
        * 由于箭头函数没有自己的this，所以当然也就不能用call()、apply()、bind()这些方法去改变this的指向
       */

       /**
        * 箭头函数不适用的场合
        *   由于箭头函数使得this从“动态”变成“静态”，下面两个场合不应该使用箭头函数。
            第一个场合是定义对象的方法，且该方法内部包括this
       */
      
    //    let usr ={
    //        name: "Alice",
    //     //    箭头函数中的this此时指的是全局变量的
    //        say:()=>console.log(this.name)
    //    }

    //    console.log(usr.say());


    //   let btn =document.getElementById("btn");
    //   btn.onclick = function(){
    //       console.log(this.innerHTML);
    //   }

    // 事件回调函数中不要使用this
        //  btn.onclick = ()=>console.log(this.innerHTML);

    /**
     * 箭头函数适用于函数体中不使用this
     * 或者函数内部嵌套函数 要求函数内部所有的函数this的指向一致
    */

    // function foo(){
        //函数内部的箭头函数的this和外层函数的this一致
    //     setTimeout(() => {
    //         console.log(this.name);
            
    //     }, 1000);

        //函数内部的函数的this为window
    //     setTimeout(function(){
    //         console.log(this.name);
    //     },3000);
    // }

    // const user ={
    //     name: "jack"
    // }

    // foo.call(user)


    </script>
</body>
</html>